<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title="添加设备"
               :modal="false"
               class="user-dialog add-or-updata"
               width="60%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <!-- <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               ref="dataForm"
               @keyup.enter.native="search"
               style="display: flex;">
        <el-form-item prop="deviceId"
                      :rules="stringRule(false)">
          <el-input v-model.trim="dataForm.deviceId"
                    placeholder="设备ID"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="name"
                      :rules="stringRule(false)">
          <el-input v-model.trim="dataForm.name"
                    placeholder="设备名称"
                    clearable></el-input>
        </el-form-item>
        <el-form-item prop="deviceType">
          <el-select v-model="dataForm.deviceType"
                     clearable
                     placeholder="设备类型">
            <el-option v-for="item in $store.state.EquTypeList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="search">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form> -->
      <Search @sumbit='sumbit'>
        <!--  搜索项 -->
        <template slot='form'>
          <el-form :inline='true'
                   @submit.native.prevent
                   :model='dataForm'
                   ref='dataForm'>
            <el-form-item prop='deviceId'>
              <el-input v-model.trim='dataForm.deviceId'
                        class='form-item'
                        clearable
                        placeholder='设备ID'></el-input>
            </el-form-item>
            <el-form-item prop='name'>
              <el-input v-model.trim='dataForm.name'
                        class='form-item'
                        clearable
                        placeholder='设备名称'></el-input>
            </el-form-item>
            <el-form-item prop='deviceType'>
              <el-select v-model="dataForm.deviceType"
                         clearable
                         placeholder="设备类型">
                <el-option v-for="item in $store.state.EquTypeList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
      </Search>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :selectionChange='selectionChange'
                      height="300px"
                      :checkbox="true"
                      :dataList='dataList'>
        <template slot="name-after">
          <el-table-column prop="deviceType"
                           align="center"
                           label="设备类型"
                           show-overflow-tooltip
                           min-width="80">
            <template slot-scope="scope">
              <span>{{$store.state.EquTypeList.find(item => item.id === scope.row.deviceType).name}}</span>
              <!-- <span v-if="scope.row.deviceType === 1">热水表</span>
              <span v-if="scope.row.deviceType === 2">冷水表</span>
              <span v-if="scope.row.deviceType === 3">电表</span>
              <span v-if="scope.row.deviceType === 4">门锁</span>
              <span v-if="scope.row.deviceType === 5">门禁</span>
              <span v-if="scope.row.deviceType === 6">网关</span>
              <span v-if="scope.row.deviceType === 7">门禁考勤一体机</span>
              <span v-if="scope.row.deviceType === 8">摄像头</span>
              <span v-if="scope.row.deviceType === 9">音频</span>
              <span v-if="scope.row.deviceType === 10">信息屏</span> -->
            </template>
          </el-table-column>
        </template>
      </table-template>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t('cancel')}}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="dataFormSubmitHandle()">添加</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import tableTemplate from '@/components/table-template'
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import Search from '@/components/search/search'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, minFormValidate],
  props: {
  },
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/tb/device/queryFinDcList?fingerprintDeviceConfigure=1', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      selectItems: [],
      visible: false,
      type: [],
      dataList: [],
      dataForm: {
        deviceId: '',
        name: '',
        deviceType: ''
      },
      dType: [{ id: 1, name: '热水表' },
        { id: 2, name: '冷水表' },
        { id: 3, name: '电表' },
        { id: 4, name: '门锁' },
        { id: 5, name: '门禁' },
        { id: 6, name: '网关' },
        { id: 7, name: '门禁考勤一体机' },
        { id: 8, name: '摄像头' },
        { id: 9, name: '音频' },
        { id: 10, name: '信息屏' }]
    }
  },
  mounted () {
  },
  components: { tableTemplate, Search },
  computed: {
    tableData () {
      return [
        { label: '设备id', width: '120', prop: 'deviceId' },
        { label: '设备名称', width: '100', prop: 'name' },
        { label: '所在位置', width: '100', prop: 'areaName' }
      ]
    }
  },
  methods: {
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getDataList({ paramData: {
            deviceId: this.dataForm.deviceId,
            name: this.dataForm.name,
            deviceType: this.dataForm.deviceType
          }
          })
        }
      })
    },
    closeDialog () {
      this.visible = false
      this.$emit('callBack')
    },
    selectionChange (data) {
      this.selectItems.splice(0, this.selectItems.length, ...data)
    },
    init (data) {
      this.visible = true
      this.getDataList()
      // let url = this.mixinViewModuleOptions.getDataListURL
      // this.$http.get(url).then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   }
      //   this.dataList = res.data.data
      // })
      //   this.getData({ url: this.mixinViewModuleOptions.getDataListURL }).then(res => {
      //     if (res.code !== 0) {
      //       return
      //     }
      //     this.dataList = res.data
      //   })
    },
    // 查询
    // search () {
    //   // const param = {}
    //   this.page = 1
    //   this.getDataList({ paramData: {
    //     deviceId: this.dataForm.deviceId,
    //     name: this.dataForm.name,
    //     deviceType: this.dataForm.deviceType
    //   }
    //   })
    // },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      let temparr = this.selectItems.map((item) => {
        // temparr.push(Number(item.id))
        return item.id
      })
      if (this.selectItems.length !== 0) {
        this.$http.put('/tb/device/updateFingerprintDeviceConfigure', temparr).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.closeDialog()
        })
      } else {
        this.$message.warning('请选择需要添加的设备')
      }
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss" scoped>
</style>
